<template>
	<view class="zdycontent">
		<view class="sp1">验证码将发送到手机号</view>
		<view class="sp2">{{uInfo.loginName}}</view>

		<view class="zdyFormItem" style="margin-top: 24rpx;box-sizing: border-box;">
			<view class="zFormIptw">
				<view class="d1">新密码</view>
				<input class="d2" :type="passwordShow?'password':'text'" v-model="logForm.password" placeholder="请输入" />
				<view class="d3">
					<u-icon v-if="!passwordShow" name="eye-fill" @click="passwordShow=true" color="#252733"
						size="20"></u-icon>
					<u-icon v-if="passwordShow" name="eye-off" @click="passwordShow=false" color="#252733"
						size="20"></u-icon>
				</view>
			</view>
			<u-line color="#EBEDF0"></u-line>
			<view class="zFormIptw">
				<view class="d1">验证码</view>
				<input class="d2" type="text" placeholder="请输入" v-model="logForm.code" />
				<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
				<view @tap="getCode" class="d3">{{tips}}</view>
				<!-- <view class="d3">获取验证码</view> -->
			</view>
		</view>

		<view style="width:calc(100vw - 48rpx);margin:0 auto;">
			<view class="base_btn1" style="margin-top:56rpx;" @click="submitForm()">确定</view>
		</view>


		<Tabbar :toIndex="'home5'"></Tabbar>
	</view>
</template>

<script>
	import {
		sendCheckCode,
		resetPwd
	} from '@/request/api.js'
	import {
		getUserInfo
	} from '@/utils/auth.js'
	import {
		testMobile
	} from '@/utils/common'
	export default {
		data() {
			return {
				passwordShow: true,
				uInfo: {},
				tips: '',
				logForm: {
					mobile: '',
					password: '',
					code: '',
				},
			}
		},
		onLoad() {
			const res = getUserInfo()
			this.uInfo = res
			this.logForm.mobile = res.loginName
		},
		methods: {
			submitForm() {

				if (this.logForm.password == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入密码',
						duration: 1500
					});
					return;
				}
				if (this.logForm.code == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码',
						duration: 1500
					});
					return;
				}

				resetPwd(this.logForm).then(res => {
					uni.$u.toast('修改成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						this.codeMsg()
					}, 500);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeMsg() {
				let data = {
					mobile: this.logForm.mobile,
					type: 1,
				}
				sendCheckCode(data).then(res => {
					console.log(res)
				})
			},
		}
	}
</script>

<style scoped>
	.sp1 {
		text-align: center;
		color: #63666B;
		font-size: 26rpx;
		padding-top: 40rpx;
	}

	.sp2 {
		text-align: center;
		font-size: 40rpx;
		font-weight: 500;
		padding-top: 8rpx;
	}
</style>